<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app">
      <h1>{{msg}}</h1>
      <h1>{{msg}}</h1>
      <button @click="fun1">改变msg</button>
    </div>
    <script src="vue-2.4.0.js"></script>
    <script>
      var vm = new Vue({
        el: "#app",
        data: {
          msg: "hello world",
        },
        methods: {
          fun1() {
            this.msg = "今天真热";
          },
        },
      });

      //   mvvm 是一种框架的设计模式
      //  vue是一个mvvm的框架 react是一个mvc的框架

      //   m model  模型 在这里指的就是vue实例里的数据data
      //   v view   视图  就是模版template 也可以理解为就是html
      //   vm view-model 就是vue实例 调度者（控制器）

      //   vue中所有的操作都是操作数据data，数据变了视图会跟着改变
    </script>
  </body>
</html>
